
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');        
		data.addColumn('string', 'Manager');		
        data.addColumn('string', 'ToolTip');
		//str='test';
        data.addRows([
          [{v:'1', f:'<div id="1">Mike<div style="color:red; font-style:italic">President</div></div>'}, '', 'The President'],
          [{v:'Jim', f:'<div id="2">Jim<div style="color:red; font-style:italic">Vice President</div></div>'}, '1', 'VP'],
		  ['Carol<br>AAAAAAAAAAAAA<br>ZZZ', 'Bob', ''],
		  ['Bob', 'Jim','Bob Sponge'],		 
          ['AliceBBBBBBBBBBBBBBBBBBBBB<br>CCC', '1', '']      
          
        ]);	
		
		data.addRow(['Hoang', 'Jim','LALA']);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
		
		$('.google-visualization-orgchart-node').click(function(){
			//alert($(this).html());
			var id = $(this).children(":first").attr('id');
			alert(id);
		});
      }
	  
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
  </body>
</html>
